import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:syn_4s/core/extension/build_context_extension.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/router/router.dart';
import 'package:syn_4s/ui/pages/google_map/google_map.dart';
import 'package:syn_4s/ui/pages/google_map/google_map_content.dart';
import 'package:syn_4s/ui/widgets/shadow_container.dart';

import '../../core/viewmodel/main_view_model.dart';
import '../shared/app_theme.dart';
import 'custom_ui.dart';

class MainMap extends StatelessWidget {

  final MainViewModel viewModel;

  const MainMap({super.key, required this.viewModel});

  @override
  Widget build(BuildContext context) {
    GlobalKey globalKey = GlobalKey();
    return ShadowContainer(
      margin: EdgeInsets.only(top: 12.px, left: 6.px, right: 6.px),
      child: Stack(
        children: [
          Container(
            color: AppTheme.backgroundColors,
            padding: EdgeInsets.only(left: 4.px),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Column(
                  children: [
                    Obx(()=>getMapRedText(viewModel.helmets.value.counts?.sosTotal)),
                    getMapTitleText(context.l10n.sos),
                    SizedBox(
                      height: 14.px,
                    ),
                    Obx(()=>getMapRedText(viewModel.helmets.value.counts?.antiCollTotal)),
                    getMapTitleText(context.l10n.anti_collision),
                    SizedBox(
                      height: 14.px,
                    ),
                    Obx(()=>getMapRedText(viewModel.helmets.value.counts?.dangerZoneTotal)),
                    getMapTitleText(context.l10n.danger_zone),
                  ],
                ),
                SizedBox(width: 4.px),
                Expanded(
                  child: Container(
                    height: 200.px,
                    child: GoogleMapContent(true, viewModel),
                  ),
                )
              ],
            ),
          ),
          Positioned(
            right: 40.px,
            top: 6.px,
            child: Container(
              key: globalKey,
              padding: EdgeInsets.only(top: 2.px, bottom: 2.px, left: 8.px),
              decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.all(Radius.circular(50.px)),
              ),
              child: InkWell(
                onTap: (){
                  // FocusScope.of(context).requestFocus(FocusNode());
                  viewModel.getGpsDevice(context, globalKey);
                },
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      context.l10n.device_view_all,
                      style: TextStyle(fontSize: 13.px,color: AppTheme.infoTextColors),
                    ),
                    SizedBox(
                      width: 14.px,
                    ),
                    const Icon(Icons.arrow_drop_down)
                  ],
                ),
              ),
            ),
          ),
          Positioned(
              right: 4.px,
              top: 6.px,
              child: GestureDetector(
                  child: getSvgPicture("assets/images/zoom_in.svg", 25.px),
                  onTap: ()=> Get.toNamed(MyRouter.googleMapRoute),
              )
          )
        ],
      ),
    );
  }

  Widget getMapRedText(int? data) {
    return Text(
      "${data??0}",
      style: TextStyle(
          color: AppTheme.redColor, fontWeight: FontWeight.w900, fontSize: 18.px),
    );
  }
}
